<template>
  <div class="waper_page">
    <div style="height: 800px; width: 900px; border: 1px solid red; position: relative;margin: 0 auto">
      <vue-draggable-resizable @click.stop @click.prevent v-for="(item,index) in list" :key="index"
        :w="item.w"
        :h="item.h"
        :x="item.x"
        :active="isDelete"
        :parent="true"
        :debug="false"
        :min-width="200"
        :min-height="200"
        :isConflictCheck="true"
        :snap="true"
        :isDel="isDelete"
        :snapTolerance="1"
        @activated="selectType(item)"
        @refLineParams="getRefLineParams"
        :class="item.class">
        <div class="dele" @mousedown.stop.prevent="deleTata($event,index)"></div>
      </vue-draggable-resizable>
      <!--辅助线-->
      <span class="ref-line v-line"
          v-for="item in vLine"
          :key="item.id + 'a'"
          v-show="item.display"
          :style="{ left: item.position, top: item.origin, height: item.lineLength}"
      ></span>
      <span class="ref-line h-line"
            v-for="item in hLine"
            :key="item.id + 'b'"
            v-show="item.display"
            :style="{ top: item.position, left: item.origin, width: item.lineLength}"
      ></span>
      <!--辅助线END-->

    </div>
  </div>
</template>

<script>
import VueDraggableResizable from '@/commont/plugins/draggable/vue-draggable-resizable'
import '@/commont/plugins/draggable/vue-draggable-resizable.css'

export default {
  name: 'app',
  components: { VueDraggableResizable },
  data () {
    return {
      list:[
        { w:200, h:200, x:0, class:'test1', active:false},
        { w:200, h:200, x:210, class:'test2', active:false},
        { w:200, h:200, x:420, class:'test3', active:false},
        { w:200, h:200, x:630, class:'test4', active:false},
      ],
      isDelete: false,
      vLine: [],
      hLine: []
    }
  },
  methods: {
    // 辅助线回调事件
    getRefLineParams (params) {
      const { vLine, hLine } = params
      let id = 0
      this.vLine = vLine.map(item => {
        item['id'] = ++id
        return item
      })
      this.hLine = hLine.map(item => {
        item['id'] = ++id
        return item
      })
    },
    selectType(item){
      console.log(item);
    },
    deleTata(e,index){
      e.preventDefault();
      e.stopPropagation();
      this.isDelete = false;
      console.log(this.$refs.del[index]);
      this.list.splice(index,1);
    },
  }
}
</script>

<style lang="less" scoped>
.test1 {
  background-color: rgb(239, 154, 154);
}
.test2{
  background-color: rgb(129, 212, 250);
}
.test3{
  background-color: rgb(174, 213, 129);
}
.test4{
  background-color: rgb(213, 129, 199);
}
.dele{
  width: 20px;
  height: 20px;
  position: absolute;
  background-color: red;
  z-index: 999;
  right: 0;
}
</style>
